<template>
    <div class="direct">
        <div class="demo-input-suffix" style="margin-left:5px;margin-right:15px;">
            <el-checkbox v-model="checkbox_isShowDustbinPicture" @change="changeMapType">显示卫星地图</el-checkbox>
        </div>
        <div class="demo-input-suffix" style="margin-right:15px;">
            <el-checkbox v-model="checkbox_isShowDustbinTitle" @change="changeMarkerLabel">显示垃圾桶名称标签</el-checkbox>
        </div>
        <div class="demo-input-suffix">指导员负责区域：</div>
        <div class="demo-input-suffix" style="margin-left:5px;margin-right:15px;">
            <el-cascader
                :options="dataVillageList"
                :show-all-levels="false"
                @expand-change="select_village_action"
                @change="select_village_action"
            ></el-cascader>
        </div>
        <div class="allmap" id="allmap"></div>
        <div class="tree">
            <el-tree :data="data_tree" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </div>
        <div class="rightinformation">
            <p for>
                <span id="span1"></span>
            </p>
            <p for>
                <span id="span2"></span>
            </p>
            <p for>
                <span id="span3"></span>
            </p>
            <p for>
                <span id="span4"></span>
            </p>
            <p for>
                <span id="span5"></span>
            </p>
        </div>
        <el-form
            title="详细信息"
            id="VillageDetail"
            :visible.sync="VillageDetail"
            class="dialogwhole"
            hidden="true"
        >
            <div>街道名称：天塔街道</div>
            <div>社区名称：紫金里社区</div>
            <div>小区名称：紫金北里</div>
            <hr />
            <div>管理单位：天塔街道</div>
            <div>联系人：王雪</div>
            <div>联系电话：15022033221</div>
            <hr />
            <div>总楼数：121</div>
            <div>总户数：355</div>
            <div>实住人数：7521</div>
        </el-form>
    </div>
</template>
<script>

import markerIcon_rubbishReal from '../../../assets/img/RubbishBoxRealScene.png'
import markerIcon_rubbish from '../../../assets/img/rubbish.png'
export default {
  data () {
    return {
      data_tree: [],
      dataVillageList: [],

      defaultProps: {
        children: 'children',
        longitude: 'longitude',
        latitude: 'latitude',
        label: 'label'
      },
      dataRubbishBoxsList: [],
      map: '',
      map_scopeCircle: '',
      map_markers: []
    }
  },
  mounted () {
    this.loadDate_Tree();
    this.initMap();
    this.loadAllBoxs('1001');
    this.loadAllVillage()
  },
  methods: {
    async loadAllVillage () {
      var url = 'http://111.160.78.62:9942/GarbagePointsApi/BasicData/GetGroupsApi?ClientNo='+localStorage.getItem('clentno');
      const { data } = await this.$axios.get(url)
      this.dataVillageList = data.filter(item => {
        return item
      })
    },
    async loadDate_Tree () {
      var url = 'http://111.160.78.62:9942/GarbagePointsApi/BasicData/GetGroupDataApi?ClientNo='+localStorage.getItem('clentno');
      const { data } = await this.$axios.get(url)
      this.data_tree = data.filter(item => {
        return item
      })
    },
    handleNodeClick (data) {
      console.log(data);
      var type = 1;
      

      document.getElementById('span1').innerText = "总人数：" + data.sumPerson;
      document.getElementById('span2').innerText = "总户数：" + data.sumHome;
      document.getElementById('span3').innerText = "总楼数：" + data.sumBuilding;
      if (data.sumDis) {
        document.getElementById('span4').innerText = "小区数量：" + data.sumDis;
        type = 2;
      } else {
        document.getElementById('span4').innerText = "";
      }
      if (data.sumArea) {
        document.getElementById('span5').innerText = "社区数量：" + data.sumArea;
        type = 3;
      } else {
        document.getElementById('span5').innerText = "";
      }
      if(data.children){
        document.getElementById("VillageDetail").setAttribute("hidden", true);
      }else{
        document.getElementById("VillageDetail").removeAttribute("hidden", true);
      }

      if (data.longitude) {
        setMapCenterAtWorkerMarker(data);        
      }
    },
    select_village_action (value) {
      console.log(value);
    },
    initMap () {
      var City = '天津'
      this.map = new BMap.Map('allmap')
      var point = new BMap.Point(117.612137, 39.043002) // 创建点坐标
      this.map.setCurrentCity(City)
      this.map.centerAndZoom(point, 18) // 初始化地图，设置中心点坐标和地图级别
      this.map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
    },
    changeMapType (val) {
      if (val) {
        this.map.setMapType(BMAP_HYBRID_MAP);
      } else {
        this.map.setMapType(BMAP_NORMAL_MAP);
      }
    },
    changeMarkerLabel (val) {
      for (var i = 0; i < this.map_markers.length; i++) {
        var marker = this.map_markers[i]
        if (val) {
          marker.getLabel().setStyle({ display: 'block' })
        } else {
          marker.getLabel().setStyle({ display: 'none' })
        }
      }
    },
    getDetails (row) {
      console.log(row)//此时就能拿到整行的信息
      this.setMapCenterAtWorkerMarker(row)
    },
    setMapCenterAtWorkerMarker (row) {
      this.map.centerAndZoom(new BMap.Point(row.longitude, row.latitude), 18)
    },
    async loadAllBoxs (CLIENT_NO) {
      var url = 'http://111.160.78.62:9942/GarbagePointsApi/BasicData/RubbishBoxApi?VillageNo=' + CLIENT_NO;
      const { data } = await this.$axios.get(url)
      this.dataRubbishBoxsList = data.filter(item => {
        this.addMarker(item)
        return item
      })
    },
    addMarker (data) {
      var point = new BMap.Point(data.LONGITUDE, data.LATITUDE);
      var myIcon = new BMap.Icon(markerIcon_rubbish, new BMap.Size(32, 35));
      //var myIcon = new BMap.Icon(require("../src/assets/img/img.jpg"), new BMap.Size(32,35));
      var marker = new BMap.Marker(point, { icon: myIcon });
      var label = new BMap.Label(data.ID, { offset: new BMap.Size(20, -10) });
      marker.setLabel(label);
      this.map_markers.push(marker);
      this.addInfoWindow(marker);
      this.map.addOverlay(marker);
      this.map.centerAndZoom(point, 18);
    },
    addInfoWindow (marker) {
      var sContent = '<iframe src="../../infowindow.html" width=400 height=220 frameborder=0 scrolling=no></iframe>'
        // var sContent = "<h4 style='margin:0 0 2px 0;padding:0.2em 0'>体院北育贤里7号楼1门</h4>"
        //   + "<div><img id='imgDemo' style='float: left;width:90px;height=100%;' src='https://taojin-his.cdn.bcebos.com/03087bf40ad162d9ac75ef6d1edfa9ec8a13cd2c.jpg' alt='logo'>"
        + "<p style='margin:0;line-height:1.5;font-size:17px;text-indent:1em'>厨余垃圾桶：5.2kg</p>"
        + "<p style='margin:0;line-height:1.5;font-size:17px;text-indent:1em'>可回收圾桶：3.4kg</p>"
        + "<p style='margin:0;line-height:1.5;font-size:17px;text-indent:1em'>其他垃圾桶：已满溢</p>"
        + "<p style='margin:0;line-height:1.5;font-size:17px;text-indent:1em'>有害垃圾桶：1.1kg</p>"
        + "<br>"
        + "<p style='margin:0;line-height:1.5;font-size:17px;text-indent:1em'>指导员：张旭</p>";
      // + "</div>";
      var infoWindow = new BMap.InfoWindow(sContent, { width: 400, height: 400 });  // 创建信息窗口对象
      marker.addEventListener("click", function () {
        this.openInfoWindow(infoWindow);
      });
    }
  },
}
</script>
<style scoped>
hr {
    margin-top: 20px;
    margin-bottom: 15px;
}
.allmap {
    width: 100%;
    height: 96%;
    border: 1px solid darkgrey;
    position: absolute;
    left: 0;
    top: 45px;
    right: 0;
    bottom: 0;
    margin: auto;
}
.direct,
body {
    width: 100%;
    height: 100%;
    position: relative;
}
.tree {
    position: absolute;
    left: 10px;
    top: 40px;
    z-index: 555;
    width: 280px;
    height: 80%;
    opacity: 0.8;
    background: #fff;
}

.tree p {
    color: #60b6a1;
    font-size: 120%;
    margin-left: 10px;
    font-weight: 600;
}
.el-tree {
    color: #000;
    font-weight: 600;
    height: 100%;
    background: #fff;
}
.rightinformation {
    z-index: 555;
    position: absolute;
    right: 10px;
    top: 50px;
    background: #000;
    opacity: 0.6;
    color: #fff;
    padding: 15px 20px;
    font-size: 15px;
}
.rightinformation > p {
    width: 100%;
}
.demo-input-suffix {
    float: left;
    font-size: 15px;
    height: 32px;
    line-height: 32px;
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
.dialogwhole {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 280px;
    height: 300px;
    font-size: 15px;
    opacity: 0.8;
    background: #fff;
    padding: 15px;
}

</style>